<!-- 通讯录 -->
<template>
  <view class="components-theme">
    <view
      class="cu-list menu card-menu margin-top-lg margin-bottom-lg shadow-shop bg-white text-black my-radius sm-border"
    >
      <view class="cu-item" @click="callPhoneNumber" data-number="18629591093" v-for="(item,index) in TxlListData">
        <view class="content">
          <!-- <image src='../../static/me/icon/dengta.png' class='png' mode='aspectFit'></image> -->
          <text class="text-lg margin-sm margin-sh">{{item.name}}</text>
        </view>
        <view class="action">
          <view class="light">{{item.phone}}</view>
        </view>
      </view>
      
      

      <!--- unAPP官网组件日期选择器上拉弹出框-->
      <view>
        <u-popup :show="show" mode="top" @close="close" @open="open">
          <!--时间选择-->
          <!-- <view>
					<view class="example-body">
						<uni-datetime-picker type="date" :clear-icon="false" v-model="single" @maskClick="maskClick" />
					</view>
				</view> -->

          <!--市区联动-->
          <view class="container" style="padding: 0 24px; margin-top: 20px">
            <uni-section
              title=""
              type="line"
              padding
              style="height: calc(100vh - 100px)"
            >
              <uni-data-picker
                placeholder="请选择所在地区"
                popup-title="请选择所在地区"
                :localdata="dataTree"
                v-model="classes"
                @change="onchange"
                @nodeclick="onnodeclick"
                @popupopened="onpopupopened"
                @popupclosed="onpopupclosed"
              >
              </uni-data-picker>
            </uni-section>
          </view>
          <!--矿山企业-->
          <view style="padding: 5px 24px">
            <u--form
              labelPosition="left"
              :model="model1"
              u-form="false"
              ref="form1"
              style=""
            >
              <u-form-item
                prop="userInfo.sex"
                borderBottom
                @click="
                  showSex = true;
                  hideKeyboard();
                "
                ref="item1"
              >
                <u--input
                  v-model="model1.userInfo.sex"
                  borderBottom="false"
                  disabled
                  disabledColor="#ffffff"
                  placeholder="请选择矿山企业"
                ></u--input>
                <!-- 	<u-icon slot="right" name="arrow-right"></u-icon> -->
              </u-form-item>
            </u--form>
            <u-action-sheet
              :show="showSex"
              :actions="actions"
              title="请选择矿山企业"
							v-model="qy"
              @close="showSex = false"
              @select="sexSelect"
            >
            </u-action-sheet>
          </view>
          <view style="padding: 5px 24px">
            <view class="button-sp-area" style="text-align: center">
              <button
                class="mini-btn btncas-one"
                @click="btnCancel()"
                type="default"
                size="mini"
              >
                取消
              </button>
              <button
                class="mini-btn btncas"
                style="background-color: #225ea4"
                type="warn"
                size="mini"
								@click="searchval"
              >
                查询
              </button>
            </view>
          </view>
        </u-popup>
      </view>
    </view>
  </view>
</template>

<script>
	import { txlList } from "@/api/my/txl.js";
	import { qylList,cityList } from "@/api/my/city.js";
export default {
  data() {
    return {
			dataList:{
				city:"",
				enterpriseInfoId:"",
				district:'',
				enterpriseName:"",
			},
			qy:0,
			value:0,
			TxlListData:[],
			qylListData:[],
			warnId: null,
      // 下拉框选择企业
      showSex: false,
      model1: {
        userInfo: {
          name: "uView UI",
          sex: "",
        },
      },
      actions: [],

      radio: "",
      switchVal: false,
      //

      single: "",
      classes: "",
      dataTree: [],
      // 下拉框选择企业完
    };
  },
	
	//注意函数和data同级,不要写在methods内
	onNavigationBarButtonTap(e) {
	  this.show = true;
		this.actions = []
		this.dataList.enterpriseName = ""
		this.model1.userInfo.sex = ""
	  // this.$tab.navigateTo('/pages/my/setting/index')
	},
	
	
  watch: {
    datetimesingle(newval) {
      // console.log("单选:", this.datetimesingle);
    },
    range(newval) {
      // console.log("范围选:", this.range);
    },
    datetimerange(newval) {
      // console.log("范围选:", this.datetimerange);
    },
  },

  onLoad() {
		this.getTxlList()
		this.getQylList()
  },

  methods: {
		// 查询
		searchval(){
		this.dataList.date = this.single
		let data = this.dataList
		this.getSbgjList(data)
		this.show = false
			this.$refs.clearCity.clear()
		},
		
		
		close() {
		  this.show = false;
		  
		},
		
		
		change(e) {
		  this.single = e;
		  console.log("change事件:", (this.single = e));
		},
		
		
		onpopupopened(e) {
		  	this.getCityList();
		},
		onpopupclosed(e) {
		  console.log("popupclosed");
		},
		onchange(e) {
		  console.log("onchange:", e.detail.value);
			
			this.dataList.city = e.detail.value[0].value
			this.dataList.district = e.detail.value[1].value
			let {city,district} = this.dataList
			 this. getSbgjList({city:city,district:district})
		},
		// 下拉框选择企业
		sexSelect(e) {
			this.dataList.enterpriseName = e.name
		  this.model1.userInfo.sex = e.name;
		  this.$refs.form1.validateField("userInfo.sex")
			
		},
		
		btnCancel() {
		  this.show = false;
		},
		
		
		// 通讯录数据
		getTxlList() {
		  txlList()
		    .then((result) => {
		      const data = result.data;
		      this.TxlListData = data;
		    })
		    .catch((err) => {
		    });
		},
		
		
		// 城市数据
		getCityList() {
		  cityList()
		    .then((result) => {
		      const data = result.data;
					this.dataTree = data.map((item)=>{
						return{
							value:item.regionCode,
							text:item.name,
							children:item.children.map((item1,index1)=>{
								return{
									value:item1.regionCode,
									text:item1.name
								}
							})
						}
					})
					
		    })
		    .catch((err) => {
		      console.log(err);
		    });
		},
		
		
		// 获取企业列表数据
		getQylList() {
		  qylList()
		    .then((result) => {
		      const data = result.data;
		      this.qylListData = data;
					this.actions = data.map((item,index)=>{
						return {
							value:index,
							name:item.name
						}
					})
		    })
		    .catch((err) => {
		    });
		},
	},
};
</script>

<style lang="scss" scoped>
.cu-list.card-menu {
  overflow: hidden;
  margin: 10px 10px 10px 10px;
  border-radius: 4px;
}

.margin-sh {
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #595959;
  line-height: 26px;
}

uni-button {
  display: inline-block;
  line-height: 2.3;
  font-size: 13px;
  padding: 0 1.34em;
  margin: 6px;
}
</style>
